<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <title>Document</title>
    <style>
        tr>th,tr>td{
            text-align: center
        }
        .box > .table > tbody > tr > td,.box > .table > tbody > tr > th{
            vertical-align: middle;
        }
        .mask{
            top: 0;
            left: 0;
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        .mask .panel{
            width: 500px;
            min-height: 200px;
            margin: auto;
            transform: translateY(150px)
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <div class="box">
            <table class='table table-bordered'>
                <thead>
                    <tr class="bg-primary">
                        <th>全选 <input type="checkbox"  v-model='checkAll'/></th>
                        <th>商品名称</th>
                        <th>图片</th>
                        <th>描述</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr v-for='({id,isSelect,title,pic,desc,price,count},index) in list' :key='item.id'> -->
                    <tr v-for='(item,index) in list' :key='item.id'>  
                        <td><input type="checkbox" v-model='item.isSelect'/></td>
                        <td>{{item.title||''}}</td>
                        <td><img :src="item.pic" alt=""></td>
                        <td>{{item.desc}}</td>
                        <td>{{item.price|money}}</td>
                        <td><input type="number" min=0  v-model='item.count'></td>
                        <td>{{item.price*item.count|money}}</td>
                        <td><button type="button" class="btn btn-danger" @click='del(item.id)'>删除</button></td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <h2>总价</h2>
                        </td>
                        <td colspan="2">
                            <h2>{{total|money}}</h2>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="8" style="text-align: right">
                            <button type="button" class="btn btn-danger" @click='clear'>清空购物车</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="mask" v-show='isShow'>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">警告</h3>
                </div>
                <div class="panel-body text-center">
                    <h2>是否删除?</h2>
                </div>
                <div class="btnBox text-right">
                    <button class="btn btn-danger" @click='cancle'>取消</button>
                    <button class="btn btn-primary" @click='sure'>确定</button>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="./jd.js"></script>